<template>
  <div class="sj-picker">
    <van-popup v-model="showPicker" position="bottom" :close-on-click-overlay="false" @click-overlay="closePopup">
      <van-picker
        show-toolbar
        :title="title"
        :columns="columns"
        :value-key="keyName"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>

<script>
import { Popup, Picker } from 'vant'
export default {
  components: {
    'van-popup': Popup,
    'van-picker': Picker
  },
  props: {
    showPicker: {
      type: Boolean,
      default: false
    },
    keyName: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '请选择'
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    closePopup(e) {
      this.$emit('cancel',
        {
          showPicker: false
        })
    },
    onConfirm(value) {
      this.$emit('selected',
        {
          value: value,
          showPicker: false
        })
    },
    onCancel(value) {
      this.$emit('cancel',
        {
          showPicker: false
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
